<template lang="pug">
    .container
        .card.mt-n10.mb-5(:data-aos="detectScreenSize('fade-up')" data-aos-delay="50")
            .card-body.p-0
                .row.no-gutters.text-center
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://news.csu.edu.cn/" target="_blank")
                        .icon-stack.icon-stack-lg.bg-green-soft.text-green.mb-2.lift.overlay.overlay-light.overlay-40
                            font-awesome-icon(:icon="['far', 'newspaper']")
                        p.card-text.small.font-weight-500 新闻网
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://my.csu.edu.cn/login/index.jsp" target="_blank")
                        .icon-stack.icon-stack-lg.bg-yellow-soft.text-yellow.mb-2.lift.overlay.overlay-light.overlay-30
                            font-awesome-icon(:icon="['fas', 'inbox']")
                        p.card-text.small.font-weight-500 信息门户
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://gdyjzx.csu.edu.cn/" target="_blank")
                        .icon-stack.icon-stack-lg.bg-red-soft.text-red.mb-2.lift.overlay.overlay-light.overlay-40
                            font-awesome-icon(:icon="['fas', 'microscope']")
                        p.card-text.small.font-weight-500 科学研究
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://lib.csu.edu.cn/" target="_blank")
                        .icon-stack.icon-stack-lg.bg-purple-soft.text-purple.mb-2.lift.overlay.overlay-light.overlay-40
                            font-awesome-icon(:icon="['fas', 'book']")
                        p.card-text.small.font-weight-500 图书馆
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://csujwc.its.csu.edu.cn/" target="_blank")
                        .icon-stack.icon-stack-lg.bg-blue-soft.text-blue.mb-2.lift.overlay.overlay-light.overlay-40
                            layers-icon
                        p.card-text.small.font-weight-500 教务管理
                    a.col-lg-2.col-4.py-3.text-solid-href(href="http://xgw.csu.edu.cn/" target="_blank")
                        .icon-stack.icon-stack-lg.bg-orange-soft.text-orange.mb-2.lift.overlay.overlay-light.overlay-40
                            font-awesome-icon(:icon="['fas', 'university']")
                        p.card-text.small.font-weight-500 学生工作

        .d-flex.align-items-center.justify-content-between.pt-2
            h6.mb-0
                router-link.category-title.a-decoration-none(:to='categoryUrl(homeCategories[0].cid)')
                    | {{cname0}}
            div
                router-link.text-arrow-icon.small(:to='categoryUrl(homeCategories[0].cid)')
                    | 查看更多
                    arrow-right-icon

        hr.mb-4

        .row
            .col-lg-7.col-xl-8
                template(v-for="(post,index) in homeCategories[0].postList")
                    .media
                        .media-body
                            router-link.text-dark(:to="postUrl(post.pid)")
                                h5.mt-0 {{trimHead(post.title)}}
                            p
                                | {{trimIntro(post.desc)}}
                            p.small
                                | {{splitDate(post.datetime)}}

                        router-link(:to="postUrl(post.pid)")
                            img.align-self-start.rounded.shadow.media-img.ml-4(:src="aliyunCropImg(post.imgUrl)", alt='新闻图片')
                    hr.my-4(v-if="index < homeCategories[0].postList.length-1")
                    hr.my-4.d-lg-none(v-if="index === homeCategories[0].postList.length-1")

            .col-lg-5.col-xl-4
                .card(:data-aos="detectScreenSize('fade-left')" data-aos-delay="200")
                    .card-body.pb-2
                        h6
                            router-link.category-title.a-decoration-none(:to='categoryUrl(homeCategories[1].cid)')
                                | {{cname1}}
                        hr
                        template(v-for="post in homeCategories[1].postList")
                            .d-flex.mb-4
                                .text-monospace
                                    .text-xl.text-center {{splitDatePlus(post.datetime).d}}
                                    .small.text-gray-500.mt-n2 {{splitDatePlus(post.datetime).ym}}
                                .ml-3.py-2
                                    router-link.text-dark(:to="postUrl(post.pid)")
                                        h6.mb-0 {{trimHead(post.title)}}

        hr.my-4

        .row
            .col-lg-4.mb-5
                h6
                    router-link.category-title.a-decoration-none(:to='categoryUrl(homeCategories[2].cid)')
                        | {{cname2}}
                hr.my-4
                template(v-for="post in homeCategories[2].postList")
                    router-link.text-dark.mb-4(:to="postUrl(post.pid)")
                        h6 {{trimHead(post.title)}}
                        p.text-gray-600.small.mb-4 {{trimIntro(post.desc)}}
                router-link.text-arrow-icon.small(:to='categoryUrl(homeCategories[2].cid)')
                    | 更多{{cname2}}
                    arrow-right-icon

            .col-lg-4.mb-5
                h6
                    router-link.category-title.a-decoration-none(:to='categoryUrl(homeCategories[3].cid)')
                        | {{cname3}}
                hr.my-4
                template(v-for="post in homeCategories[3].postList")
                    router-link.text-dark.mb-4(:to="postUrl(post.pid)")
                        h6 {{trimHead(post.title)}}
                        p.text-gray-600.small.mb-4 {{trimIntro(post.desc)}}
                router-link.text-arrow-icon.small(:to='categoryUrl(homeCategories[3].cid)')
                    | 更多{{cname3}}
                    arrow-right-icon

            .col-lg-4.mb-5
                h6
                    router-link.category-title.a-decoration-none(:to='categoryUrl(homeCategories[4].cid)')
                        | {{cname4}}
                hr.my-4
                template(v-for="post in homeCategories[4].postList")
                    router-link.text-dark.mb-4(:to="postUrl(post.pid)")
                        h6 {{trimHead(post.title)}}
                        p.text-gray-600.small.mb-4 {{trimIntro(post.desc)}}
                router-link.text-arrow-icon.small(:to='categoryUrl(homeCategories[4].cid)')
                    | 更多{{cname4}}
                    arrow-right-icon

        //大卡片
        .d-flex.align-items-center.justify-content-between
            h6.mb-0
                router-link.category-title.a-decoration-none(:to='categoryUrl(campusLife.cid)') {{cname5}}
            div
                router-link.text-arrow-icon.small(:to='categoryUrl(campusLife.cid)')
                    | 查看更多
                    arrow-right-icon
        hr.mb-4
        .card.mb-5(:data-aos="detectScreenSize('fade-right')" data-aos-delay="150")
            .card-body.p-0
                .row.no-gutters
                    .col-lg-6.p-5
                        router-link.badge.badge-marketing.badge-primary-soft.badge-pill.text-primary.mb-3(:to='searchTag')
                            | {{campusLife.tag}}
                        router-link.text-dark(:to='postUrl(campusLife.pid)')
                            h1 {{trimHead(campusLife.head)}}
                        p {{trimIntro(campusLife.intro)}}
                        router-link.text-arrow-icon.small(:to='postUrl(campusLife.pid)')
                            | 查看详情
                            arrow-right-icon
                    .col-lg-6.align-self-stretch.bg-img-cover.d-none.d-lg-flex(
                        :style="{backgroundImage: 'url('+largeCardImgUrl+')'}"
                        :data-aos="detectScreenSize('slide-left')"
                        data-aos-delay="250"
                    )


</template>

<script>
import { getPostListByCid } from '@/api/category';

export default {
    name: 'home-overview',
    computed: {
        cname0() {
            return this.$store.getters.cName(this.homeCategories[0].cid);
        },
        cname1() {
            return this.$store.getters.cName(this.homeCategories[1].cid);
        },
        cname2() {
            return this.$store.getters.cName(this.homeCategories[2].cid);
        },
        cname3() {
            return this.$store.getters.cName(this.homeCategories[3].cid);
        },
        cname4() {
            return this.$store.getters.cName(this.homeCategories[4].cid);
        },
        cname5() {
            return this.$store.getters.cName(this.campusLife.cid);
        },
        //根据大卡片的tag进行搜索
        searchTag() {
            return '/search?keywords=' + this.campusLife.tag;
        },
        // 大卡片图片
        largeCardImgUrl() {
            return (
                this.campusLife.imgUrl || '/assets/img/banners/carousel3.jpg'
            );
        },
    },
    data() {
        return {
            //唯一改cid的入口,前五个大类
            homeCategories: [
                { cid: 46, postList: [] },
                { cid: 48, postList: [{}, {}, {}, {}, {}] },
                {
                    cid: 45,
                    postList: [
                        {
                            title:
                                '关于转发《中南大学领导班子“三重一大”决策制度实施办法》的通知',
                            desc:
                                '中南大学领导班子“三重一大”决策制度实施办法》的通知各二级党组织',
                        },
                        {
                            title:
                                '关于转发《中南大学领导班子“三重一大”决策制度实施办法》的通知',
                            desc:
                                '中南大学领导班子“三重一大”决策制度实施办法》的通知各二级党组',
                        },
                        {
                            title:
                                '关于转发《中南大学领导班子“三重一大”决策制度实施办法》的通知',
                            desc:
                                '中南大学领导班子“三重一大”决策制度实施办法》的通知各二级党组',
                        },
                    ],
                },
                { cid: 49, postList: [] },
                { cid: 50, postList: [] },
            ],
            //最后一个校园生活
            campusLife: {
                cid: 47,
                pid: 1,
                tag: '班级建设',
                head: '“一花引来百花开” ——软件学院1701班班级学风建设经验浅谈',
                intro:
                    '学风是学校治学精神、治学态度和治学原则的综合体现，是构成良好校风的基础和前提，也是培养高素质人才的关键。对学校如此，对班级更加如此',
                imgUrl: '/assets/img/banners/carousel3.jpg',
            },
            //基本参数
            isLargeEnough: false,
            basicSize: 3, //普通栏目文章列表个数
            noticeSize: 5, //公告栏列表个数
        };
    },
    methods: {
        //判断屏幕大小是否支持入场动画
        detectScreenSize(animation) {
            if (this.isLargeEnough) {
                return animation;
            }
            return '';
        },
        //初始化, 将数据注入
        init() {
            //加载前五个大类数据
            this.homeCategories.forEach((hc, i) => {
                const num = i === 1 ? this.noticeSize : this.basicSize;
                getPostListByCid(hc.cid, num).then(({ postList }) => {
                    hc.postList = postList;
                });
            });
            //加载第六个大类:大卡片数据
            getPostListByCid(this.campusLife.cid, 1).then(({ postList }) => {
                const campusInfo = postList[0];
                this.campusLife.pid = campusInfo.pid;
                this.campusLife.imgUrl = campusInfo.imgUrl;
                this.campusLife.intro = campusInfo.desc;
                //解决头部及标签问题
                const reg = /^[[【][^\]^】]+[\]】]/g;
                const [tag] = reg.exec(campusInfo.title);
                if (tag && tag.length > 2) {
                    this.campusLife.tag = tag.slice(1, tag.length - 1);
                    this.campusLife.head = campusInfo.title.slice(
                        tag.length,
                        campusInfo.title.length
                    );
                } else {
                    this.campusLife.tag = '';
                    this.campusLife.head = campusInfo.title;
                }
            });
        },
        trimHead(head) {
            let _head = head;
            if (_head && _head.length > 34) {
                _head = _head.substring(0, 34);
                _head += '...';
            }
            return _head;
        },
        trimIntro(intro) {
            let _intro = intro;
            if (_intro && _intro.length > 86) {
                _intro = _intro.substring(0, 86);
                _intro += '...';
            }
            return _intro;
        },
        splitDate(datetime) {
            return datetime.split(' ')[0];
        },
        splitDatePlus(datetime) {
            datetime = datetime ? datetime : '2020-08-12 23:34';
            const arr = datetime.split(' ')[0].split('-');
            return {
                ym: arr[0] + '.' + arr[1],
                d: arr[2],
            };
        },
        categoryUrl(cid) {
            return '/category/' + cid;
        },
        postUrl(pid) {
            return '/post/' + pid;
        },
        //阿里云oss图片裁剪成宽高比1:1
        aliyunCropImg(imgUrl) {
            return imgUrl + '?x-oss-process=image/resize,m_fill,h_100,w_100';
        },
    },
    created() {
        this.isLargeEnough = document.documentElement.clientWidth > 500;
        this.init();
    },
};
</script>

<style scoped lang="scss">
.category-title {
    font-size: 1.18rem;
    font-weight: 550;
}
//修改全局样式, 增加背景
a.text-solid-href {
    &:hover {
        cursor: pointer;
        background-color: $gray-50;
    }
}
//特殊图标滤镜
.overlay {
    &:hover {
        &:before {
            opacity: 0;
        }
    }
}
</style>
